import styled from 'styled-components'
import border from 'components/styled/border'

const HomeContainer = styled.div`
    display: flex;
    flex-direction: column;
   .homeContainer{
   }
`
// 顶部导航栏
const NavContainer = styled.div`
    flex-grow:0;
    flex-shrink:0;
     header{
       
        .header-icon{
            height:.44rem;
            
            background:#fff;
            display:flex;
            justify-content:space-between;
            align-items:center;
           
            div:first-child{
                /* margin-top:.07rem; */
                display:flex;
               img{
                  width:.2rem;
                  height:.2rem;
               }
              .location{
                 
                  margin:.05rem 0 0 .2rem;
              }
              span{
                  width:.7rem;  
                  margin-top:.05rem;
                  color:#646464;
                  text-align:center; 
              }
              .more{
            
                  margin-top:.06rem;
              }
               
            }
            div:nth-child(2){
                /* margin-top:.07rem; */
                position: relative;
                right:0
                img{
                    width:.2rem;
                    height:.2rem;
                    margin-top:.05rem;
                }
                .search{
                    margin-top:.06rem;
                }
                .info{
                   margin:.05rem .2rem 0 .1rem; 
                }
            }
        }
    }

`

// 轮播图
const SwiperContainer = styled.div`
    flex-shrink:0;
    flex-grow: 0;
   >div{
      height:0 !important;
      padding-bottom:42.6666667% !important;
       img{
          width:100%;
       }
   }
`
// 热门推荐
const HotRecoContainer = border({
    color:'#ebebeb',
    width:'1px 0 0 0',

    
    comp:styled.div`
    margin-top:.1rem;

    flex-shrink:1;
    flex-grow:1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    >div{
        display:flex;
        justify-content:space-between;
        align-items:center;
      
       
     h3{
       display:inline-block;
       color:#646464;
       font-weight:normal;
       font-size:.18rem;
       margin:.15rem 0 0 .2rem;
        }
        .more{
            width:.2rem;
            height:.2rem;
            position: relative;
            right:.1rem;
            top:.1rem;
          
        }
    }
    `
})


// 热门推荐列表
const HotTaskContainer = styled.div`
flex-shrink:1;
flex-grow:1;
overflow: auto;
 >div{
     margin-top:.25rem; 
     width:100%;
     height: 100%;
     ul{ 
         padding:0 .15rem .15rem .15rem;
         /* height:2.3rem; */
         height:100%;
         width:100%;
         overflow: auto;
        
         li{
             width:100%;
             height:.8rem;
             margin-bottom:.08rem;
             background:rgba(255,255,255,1);
             box-shadow:0 .03rem .06rem rgba(0,0,0,0.08);
             opacity:1;
             color:#646464;
             border-radius:.1rem;
             display:flex;
             .taskLeft{
                 width:70%;
                 padding-left:.15rem;
               
                 h4{
                     padding-top:.05rem;
                     font-size:.14rem;
                 }
                 .taskContent{
                    overflow: hidden; 
                    white-space: nowrap; 
                    text-overflow: ellipsis;
                    color:#c0c0c0;
                    padding-top:.05rem;
                 }
                 .taskTime{
                   
                    
                 }
             }
             .taskRight{
                 position: relative;
                 flex:1;
                 display:flex;
                 justify-content:center;
                 align-items:center;
                 color:#FFB538;
                 span:first-child{
                     font-size:.3rem;
                     font-weight:bold;
                 }
                 span:nth-child(2){
                     font-size:.2rem;
                 }
             }
         }
     }
 }
`


export{
    HomeContainer,
    NavContainer,
    SwiperContainer,
    HotRecoContainer,
    HotTaskContainer
}